import type { UseFetchOptions } from "nuxt/app"
/**
 * 路由配置 https://www.nuxt.com.cn/docs/api/composables/use-fetch
 * @param opt 修改/添加配置
 * @returns 
 */
export const useRequsetOption = (opt?: Partial<UseFetchOptions<any>>): UseFetchOptions<any> => {
    const user = useStore.user()
    const lang = useStore.lang()
    const config = useRuntimeConfig()
    const option = opt || {}
    return {
        baseURL: config.public.apihost,
        method: 'GET',
        onRequest({ request, options }) {
            // Set the request headers
            // const i18n = useI18n()
            const token = user.token
            options.headers = options.headers || {};
            if (token) (options.headers as any).authorization = token;
            if (lang.value) (options.headers as any).language = lang.value;
        },
        onRequestError({ request, options, error }) {
            // Handle the request errors
            // console.error(error)
        },
        onResponse({ request, response, options }) {
            const res = response._data
            if (res.code && [200, 401].indexOf(res.code) < 0) {
                ElMessage({
                    type: 'error',
                    message: res.msg || res.message || 'Api error.',
                })
            }
            response._data = res
        },
        onResponseError({ request, response, options }) {
            // Handle the response errors
            // console.error(error)
        },
        ...option
    }
}

/**
 * 传统的响应式请求
 * @param url 路由
 * @param opt 配置
 * @returns 
 */
export const useHttpRequset = (url:string, opt?: Partial<UseFetchOptions<any>>): Promise<any> => {
    const option: object = useRequsetOption(opt)
    const headers = useRequestHeaders(['cookie'])
    return $fetch(url, {
        ...option,
        headers
    })
}

/**
 * 原文（https://www.nuxt.com.cn/docs/api/composables/use-fetch）
 * deep: 以深层ref对象的形式返回数据（默认为true）。可以将其设置为false，以在浅层ref对象中返回数据，如果您的数据不需要深层响应，则可以提高性能。
 * watch: 监听一组响应式源，并在它们发生变化时自动刷新获取的结果。默认情况下，会监听fetch选项和URL。您可以通过使用watch: false来完全忽略响应式源。结合immediate: false，可以实现完全手动的useFetch。
 * 推荐使用useFetch返回的refresh/execute来固定场景刷新页面数据，这样符合服务端和客户端渲染
 */
type FnType = () => string
export const useSeverRequset = (url:string|FnType, opt?: Partial<UseFetchOptions<any>>): Promise<any> => {
    const option: object = useRequsetOption(opt)
    return useFetch(url, {
        ...option,
        deep: false,
        watch: false
    })
}
